/*
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
*/


// 白天主题的变量集合
$day-theme : (
  bg-color: #F5F5F5,//背景色
  text-color: black,//字体颜色
  border-color: rgb(216, 186, 255),
  shadow-color:rgb(224, 160, 255)
);
// 夜晚主题的变量集合
$night-theme : (
  bg-color: black,//背景色
  text-color: #F5F5F5 ,//字体颜色
  border-color: #88a1d7,
  shadow-color: #88a1d7
);
//定义主题对象
$themes: (// key为主题  value为主题的变量集合
  day-theme: $day-theme,
  night-theme: $night-theme
);


// 生成主题背景色样式
@mixin base-background(){
    @each $themename , $theme in $themes {
        &.#{$themename} {
            background-color: map-get($map: $theme, $key: bg-color) ;
        }
    }
}
// 生成主题字体色样式
@mixin text-color(){
    @each $themename , $theme in $themes {
        &.#{$themename} {
            color: map-get($map: $theme, $key: text-color) !important;
        }
    }
}

// 生成主题边框色样式
@mixin border-color($opa: 1.0){
    @each $themename , $theme in $themes {
        &.#{$themename} {
            border-color: rgba(map-get($map: $theme, $key: border-color), $opa)  !important;
        }
    }
}

// 生成主题阴影
@mixin shadow-color(){
    @each $themename , $theme in $themes {
        &.#{$themename} {
			box-shadow: 0 16rpx 32rpx rgba(map-get($map: $theme, $key: shadow-color), 0.4);
        }
    }
}


